<template>
  <div class="words">
    <div class="hotword">
      <span v-for="word in hotWords" :key="word.searchWord"
        @click="$emit('changekeyword',word.searchWord)"
      >
          {{word.searchWord}}
       </span>
    </div>
    <div class="history"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotWords: [],
    };
  },
  created() {
    this.axios.get("/search/hot/detail").then((result) => {
      // console.log(result);
      this.hotWords = result.data.data.slice(0, 10);
    });
  },
};
</script>

<style lang="less" scoped>
.hotword {
  //   overflow: hidden;
  height: 72vh;
  span {
    float: left;
    line-height: 16px;
    padding: 5px 12px;
    margin: 5px;
    border-radius: 14px;
    border: 1px solid #ddd;
  }
}
</style>